<template>
  <div class="hight100 about-us">
    <location-link :type="'anchor'" v-show="showDownArrow" :linkArr="linkArr" :cur="curPage" v-on:pageChange="pageChange"></location-link>
    <swiper class="main-swiper" :options="renderSwiperOption" ref="mainSwiper">
      <swiper-slide v-if="renderData.length>0">
        <div class="page-ct">
          <aboutus-page :aboutType="'intro'" :renderData="renderData"></aboutus-page>
        </div>
      </swiper-slide>
      <swiper-slide v-else>
        <div class="page-ct">
        </div>
      </swiper-slide>
      <swiper-slide v-if="managerData.length>0">
        <div class="page-ct">
          <manager-page :manager="managerData"></manager-page>
        </div>
      </swiper-slide>
      <swiper-slide v-else>
        <div class="page-ct">
        </div>
      </swiper-slide>
      <swiper-slide v-if="bigEvent.length>0">
        <div class="page-ct">
          <big-event :events="bigEvent"></big-event>
        </div>
      </swiper-slide>
      <swiper-slide v-else>
        <div class="page-ct">
        </div>
      </swiper-slide>
      <swiper-slide v-if="nav">
        <div class="page-ct">
          <aboutus-page :aboutType="'contact'" :company="nav.company"></aboutus-page>
        </div>
      </swiper-slide>
      <swiper-slide v-else>
        <div class="page-ct">
        </div>
      </swiper-slide>
      <swiper-slide>
        <footer-screen></footer-screen>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
  import footerScreen from 'src/components/footer/footer'
  import swiperConfig from 'src/mixins/swiperConfig'
  import aboutusPage from './aboutusPage'
  import managerPage from './managerPage'
  import bigEvent from './bigEvent'
  import request from 'src/util/request'
  import locationLink from 'src/views/location/location'
  import { mapGetters } from 'vuex'

  export default {
    name: 'aboutUs',
    mixins: [swiperConfig],
    data () {
      return {
        curPage: 0,
        linkArr: [
          {
            name: '企业介绍',
            href: '0'
          }, {
            name: '管理团队',
            href: '1'
          }, {
            name: '企业大事记',
            href: '2'
          }, {
            name: '联系我们',
            href: '3'
          }
        ],
        renderData: [],
        bigEvent: [],
        managerData: [],
        company: null
      }
    },
    computed: {
      ...mapGetters([
        'showDownArrow',
        'nav'
      ]),
      renderSwiperOption () {
        let vm = this
        let option = this.mainSwiperOptions
        option.on.slideChangeTransitionStart = function () {
          if (this.activeIndex === this.slides.length - 1) {
            vm.setArrowBtnState(false)
          } else {
            vm.setArrowBtnState(true)
          }
          vm.curPage = this.activeIndex
        }
        return option
      }
    },
    props: {
    },
    components: {
      footerScreen,
      aboutusPage,
      managerPage,
      bigEvent,
      locationLink
    },
    methods: {
      pageChange (index) {
        this.curPage = index
        this.slideMainSwiper(index)
        this.$router.push(`${index}`)
      },
      slideMainSwiper (index) {
        this.$refs.mainSwiper.swiper.slideTo(index,0)
      },
      _ajaxAbout () {
        request({
          url: `/api/topic/descendants/MENU_ABOUT`
        })().then((data) => {
          this.renderData = data
          this.bigEvent = data[3].topics[0].topicItems
        })
      },
      _ajaxManager () {
        request({
          url: `/api/personal/CY58`
        })().then((data) => {
          this.managerData = data
        })
      }
    },
    mounted () {
      this._ajaxAbout();
      this._ajaxManager();
      this.curPage = parseInt(this.$route.params.index)
      this.slideMainSwiper(this.curPage)
      if(this.curPage < 4) {
        this.setArrowBtnState(true)
      }
    },
    watch: {
      $route (router) {
        let index = parseInt(router.params.index)
        this.slideMainSwiper(index)
      },
      indexData (val) {
        this.company = val
      }
    }
  }
</script>

<style lang="scss" scoped>
  .about-us {
  	color: #333;
  }
  .page-ct {
  	height: 100%;
  }
</style>
